<template>
  <div class="wrapper">
    <a-affix :offset-top="64" style="width: 100%">
      <div class="top">
        <div class="left">
          <div
            class="back"
            @click="() => $router.go(-1)">
            <a-icon type="left" />
          </div>
        </div>
        <div class="name">{{ organizationName }}</div>
        <div class="right">
          <a-button type="primary" @click="fileDownLoad()">
            导出
          </a-button>
        </div>
      </div>
    </a-affix>
    <div v-html="table" class="xlsxTable"></div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import axios from 'axios'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'
export default {
  name: 'ScoreDetail',
  components: {
  },
  data () {
    return {
      declarationInfoId: this.$route.query.declarationInfoId,
      organizationName: this.$route.query.organizationName,
      xlsxSpinning: false,
      table: null
    }
  },
  filters: {
  },
  created () {
    this.getXLSX()
  },
  computed: {
  },
  methods: {
    getXLSX () {
      this.xlsxSpinning = true
      axios
        .get('/grade-evaluation-api/declarationInfo/export?id=' + this.declarationInfoId, {
          headers: {
            'Authorization': storage.get(ACCESS_TOKEN)
          },
          responseType: 'arraybuffer' // 注意返回数据类型
        })
        .then((res) => {
          const workbook = XLSX.read(res.data, { type: 'binary' })
          const worksheet = workbook.Sheets[workbook.SheetNames[0]] // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
          console.log(XLSX.utils.sheet_to_json(worksheet))
          this.table = XLSX.utils.sheet_to_html(worksheet) // 渲染
        }).finally(() => {
          this.xlsxSpinning = false
        })
    },
    fileDownLoad () {
      axios
        .get('/grade-evaluation-api/declarationInfo/export?id=' + this.declarationInfoId, {
          headers: {
            'Authorization': storage.get(ACCESS_TOKEN)
          },
          responseType: 'blob' // 注意返回数据类型
        })
        .then((res) => {
          const url = window.URL.createObjectURL(res.data)
          const linkElement = document.createElement('a') // 创建点击下载的元素
          linkElement.setAttribute('href', url)
          linkElement.setAttribute('downLoad', this.organizationName)
          linkElement.click()
        })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
    color: rgba(0, 0, 0, 0.85);
    background: #fff;
    .top {
    background: #fff;
        width: 100%;
        height: 64px;
        padding: 0 16px;
        font-size: 16px;
        .flex-between();
        .left {
            width: 100px;
            .flex-start();
            .back {
              cursor: pointer;
            }
        }
        .right {
            width: 100px;
        .flex-end();
        }
        .name {
            font-weight: bold;
        }
    }
    :deep(.xlsxTable) {
        width: 100%;
        text-align: center;
        table {
        width: 100%;
            border-top: 1px solid rgba(0, 0, 0, 0.85);
            border-left: 1px solid rgba(0, 0, 0, 0.85);
            td {
             border-right: 1px solid rgba(0, 0, 0, 0.85);
             border-bottom: 1px solid rgba(0, 0, 0, 0.85);
            }
        }
    }
}
</style>
